<template>
  <el-popover placement="bottom" width="80" trigger="click" :class="popoverClass">
    <a ondragstart="return false;" href="javascript:;" slot="reference" :class="jsonList.value_str?'color-bl':''">
      <template v-if="reference=='01'">
        {{jsonList.value_str?jsonList.label_str:jsonList.filter_name}}
      </template>
      <template v-else>{{jsonList.filter_name}}</template>
      <img src="@/assets/images/tx_answer/accessRecord/sanjiao.png" class="table_icon" />
    </a>
    <div class="table_operation">
      <p ondragstart="return false;" class="table_but1 hand cf" v-for="(item,index) in jsonList.list"
        :class="item.value==jsonList.value_str?'active':''" @click="screen_choose(item)">{{item.label}}</p>
    </div>
  </el-popover>
</template>
<script>
  import {
    getCommonData
  } from '@/api/tx_answer/common';
  var _this
  export default {
    name: 'CurrencySingle',
    data() {
      return {}
    },
    props: {
      jsonList: {
        type: Object, //数据类型
        default: {}, //默认值
      },
      reference: {
        type: String, //数据类型
        default: '00', //默认值
      },
      popoverClass: { //el-popover 的类
        type: String, //数据类型
        default: '', //默认值
      },
    },
    created: function() { //html加载完成之前

    },
    mounted: function() {

    },
    methods: {
      empty_sub: function() { //清空筛选条件
        this.jsonList.value_str = '';
        this.jsonList.label_str = '';
        this.$emit("single_sub", this.jsonList);
      },
      screen_choose: function(item) {
        this.jsonList.value_str = item.value;
        this.jsonList.label_str = item.label;
        this.$emit("single_sub", this.jsonList);
      },
    },
    watch: {},
  }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  .table_operation p.active {
    background-color: #ECF4FF;
  }

  .table_icon {
    width: 7px;
    height: 5px;
    margin-left: 4px;
    vertical-align: middle;
  }
</style>
